<template>
  <div class="about">
    <Menu
      mode="horizontal"
      active-name="2"
      style="
        background-image: linear-gradient(
          to right,
          rgb(44, 79, 149),
          rgb(70, 145, 247)
        );
        color: aliceblue;
      "
    >
      <div></div>
      <router-link to="/index">
        <MenuItem name="1">
          <img
            style="
              height: 80%;
              width: 192px;
              vertical-align: middle;
              border-style: none;
              overflow-clip-margin: content-box;
              overflow: clip;
              padding-right: 0px;
            "
            src="https://file.iviewui.com/admin-cloud-dist/img/logo-dark.f7ebe922.png"
            alt=""
          />
        </MenuItem>
      </router-link>
      <router-link to="/index">
        <MenuItem name="2" style="color: aliceblue" @click="showaddmin">
          <Icon type="ios-paper" />首页
        </MenuItem>
      </router-link>
      <router-link to="/system/user">
        <MenuItem name="3" style="color: aliceblue" @click="showAdminList">
          <Icon type="ios-people" />系统管理
        </MenuItem>
      </router-link>
      <li style="position: absolute; right: 5%">
        <span>搜索...</span>
        <span style="margin-left: 50px">
          <img
          :src="adminInfo.avatarUrl"
            alt=""
            style="
              height: 40px;
              width: 40px;
              border-radius: 20px;
              vertical-align: middle;
            "
          />
          <span style="margin-left: 10px"> 管理员 </span>
        </span>
      </li>
    </Menu>

    <router-view></router-view>
  </div>
</template>
<script>
import UserView from "./UserView.vue";
import Index from "./Index.vue";
export default {
  components: { UserView },
  components: { Index },
  computed:{
    adminInfo() {
      return this.$store.state.Admin.adminInfo;
    },
  },
  data() {
    return {
    };
  },
  methods: {
    showAdminList() {
      this.$store.commit("addrouterMenuItem",{
        name:"用户列表",
        path:"/system/user"
      })
    },
    watchScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //  当滚动超过 50 时，实现吸顶效果
      if (scrollTop > 49) {
        this.navBarFixed = true;
      } else {
        this.navBarFixed = false;
      }
    },
  },
  mounted() {
    // 事件监听滚动条
    window.addEventListener("scroll", this.watchScroll);
  },
};
</script>
<style scoped>
.ul3 li {
  padding-left: 40px;
}
.ul2 {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}
.ul2 span {
  margin: auto;
}
.ul1 {
  display: flex;
  justify-content: space-between;
}
.ul1 li {
  color: rgb(74, 138, 223);
}
/* .ivu-menu ivu-menu-light ivu-menu-horizontal {
  width: 192px;
} */
</style>
  